¿Cómo verifico si un elemento está oculto en jQuery?

1
2
Siguiente
Dado que la pregunta se refiere a un solo elemento, este código podría ser más adecuado:
// Comprueba el contenido CSS para la visualización: [ninguno | bloque], ignora la visibilidad: [verdadero | falso]
$ (elemento) .is (": visible");
// Lo mismo funciona con hidden
$ (elemento) .is (": oculto");
Es lo mismo que la sugerencia de twernt, pero aplicada a un solo elemento; y coincide con el algoritmo recomendado en las preguntas frecuentes de jQuery.
Usamos jQuery's is () para verificar el elemento seleccionado con otro elemento, selector o cualquier objeto jQuery. Este método recorre los elementos DOM para encontrar una coincidencia que satisfaga el parámetro pasado. Devolverá verdadero si hay una coincidencia; de lo contrario, devolverá falso.
|
Puede utilizar el selector oculto:
// Coincide con todos los elementos que están ocultos
$ ('elemento: oculto')
Y el selector visible:
// Coincide con todos los elementos que son visibles
$ ('elemento: visible')
|
if ($ (elemento) .css ('pantalla') == 'ninguno' || $ (elemento) .css ("visibilidad") == "oculto") {
// 'elemento' está oculto
}
El método anterior no considera la visibilidad del padre. Para considerar al padre también, debe usar .is (": hidden") o .is (": visible").
Por ejemplo,

 Div2 

El método anterior considerará div2 visible mientras: visible not. Pero lo anterior podría ser útil en muchos casos, especialmente cuando necesita encontrar si hay algún error divs visible en el padre oculto porque en tales condiciones: visible no funcionará.
|
Ninguna de estas respuestas aborda lo que entiendo que es la pregunta, que es lo que estaba buscando, "¿Cómo manejo los elementos que tienen visibilidad: ocultos?". Ni: visible ni: hidden manejarán esto, ya que ambos buscan una visualización según la documentación. Por lo que pude determinar, no hay un selector para manejar la visibilidad de CSS. Así es como lo resolví (selectores de jQuery estándar, puede haber una sintaxis más condensada):
$ (". elemento"). cada (función () {
if ($ (esto) .css ("visibilidad") == "oculto") {
// manejar el estado no visible
} más {
// manejar el estado visible
}
});
|
De ¿Cómo determino el estado de un elemento conmutado?
Puede determinar si un elemento está contraído o no utilizando los selectores: visible y: hidden.
var isVisible = $ ('# myDiv'). is (': visible');
var isHidden = $ ('# myDiv'). is (': hidden');
Si simplemente está actuando sobre un elemento en función de su visibilidad, puede incluir: visible o: hidden en la expresión del selector. Por ejemplo:
$ ('# myDiv: visible'). animate ({izquierda: '+ = 200px'}, 'lento');
|
A menudo, al comprobar si algo es visible o no, va a seguir adelante inmediatamente y hacer otra cosa con él. El encadenamiento de jQuery lo hace fácil.
Entonces, si tiene un selector y desea realizar alguna acción en él solo si está visible u oculto, puede usar filter (": visible") o filter (": hidden") seguido de encadenarlo con la acción que desea tomar.
Entonces, en lugar de una declaración if, como esta:
if ($ ('# btnUpdate'). is (": visible"))
{
$ ('# btnUpdate'). animate ({ancho: "alternar"}); // Ocultar botón
}
O más eficiente, pero aún más feo:
botón var = $ ('# btnUpdate');
if (button.is (": visible"))
{
button.animate ({ancho: "alternar"}); // Ocultar botón
}
Puedes hacerlo todo en una sola línea:
$ ('# btnUpdate'). filter (": visible"). animate ({width: "toggle"});
|
El selector: visible de acuerdo con la documentación de jQuery:
Tienen un valor de visualización CSS de ninguno.
Son elementos de formulario con type = "hidden".
Su ancho y alto se establecen explícitamente en 0.
Un elemento ancestro está oculto, por lo que el elemento no se muestra en la página.
Los elementos con visibilidad: ocultos u opacidad: 0 se consideran visibles, ya que aún consumen espacio en el diseño.
Esto es útil en algunos casos e inútil en otros, porque si desea verificar si el elemento es visible (display! = None), ignorando la visibilidad de los padres, encontrará que haciendo .css ("display") == 'none 'no solo es más rápido, sino que también devolverá el control de visibilidad correctamente.
Si desea verificar la visibilidad en lugar de la visualización, debe usar: .css ("visibilidad") == "oculto".
También tenga en cuenta las notas adicionales de jQuery:
Debido a que: visible es una extensión de jQuery y no forma parte de la especificación CSS, las consultas que usan: visible no pueden aprovechar el aumento de rendimiento proporcionado por el método nativo DOM querySelectorAll (). Para lograr el mejor rendimiento al usar: visible para seleccionar elementos, primero seleccione los elementos usando un selector de CSS puro, luego use .filter (": visible").
Además, si le preocupa el rendimiento, debería marcar Ahora me ves ... mostrar / ocultar rendimiento (2010-05-04). Y use otros métodos para mostrar y ocultar elementos.
|
Esto funciona para mí, y estoy usando show () y hide () para hacer que mi div esté oculto / visible:
if ($ (this) .css ('display') == 'none') {
/ * tu código va aquí * /
} más {
/ * lógica alternativa * /
}
|
Cómo funciona la visibilidad de elementos y jQuery;
Un elemento se puede ocultar con display: none,visibilidad: oculta u opacidad: 0. La diferencia entre esos métodos:
display: none oculta el elemento y no ocupa espacio;
visibilidad: oculto oculta el elemento, pero aún ocupa espacio en el diseño;
opacidad: 0 oculta el elemento como "visibilidad: oculta", y aún ocupa espacio en el diseño; la única diferencia es que la opacidad permite hacer un elemento parcialmente transparente;
if ($ ('. target'). is (': hidden')) {
$ ('. target'). show ();
} más {
$ ('. target'). hide ();
}
if ($ ('. target'). is (': visible')) {
$ ('. target'). hide ();
} más {
$ ('. target'). show ();
}
if ($ ('. target-visibilidad'). css ('visibilidad') == 'oculto') {
$ ('. target-visibilidad'). css ({
visibilidad: "visible",
monitor: ""
});
} más {
$ ('. target-visibilidad'). css ({
visibilidad: "oculto",
monitor: ""
});
}
if ($ ('. target-visibilidad'). css ('opacidad') == "0") {
$ ('. target-visibilidad'). css ({
opacidad: "1",
monitor: ""
});
} más {
$ ('. target-visibilidad'). css ({
opacidad: "0",
monitor: ""
});
}
Métodos útiles de alternancia de jQuery:
$ ('. click'). click (function () {
$ ('. target'). toggle ();
});
$ ('. click'). click (function () {
$ ('. target'). slideToggle ();
});
$ ('. click'). click (function () {
$ ('. target'). fadeToggle ();
});
|
También puede hacer esto usando JavaScript simple:
function isRendered (domObj) {
if ((domObj.nodeType! = 1) || (domObj == document.body)) {
devuelve verdadero;
}
if (domObj.currentStyle && domObj.currentStyle ["pantalla"]! = "ninguno" && domObj.currentStyle ["visibilidad"]! = "oculto") {
return isRendered (domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, nulo);
if (cs.getPropertyValue ("mostrar")! = "ninguno" && cs.getPropertyValue ("visibilidad")! = "oculto") {
return isRendered (domObj.parentNode);
}
}
falso retorno;
}
Notas:
Funciona en todas partes
Funciona para elementos anidados
Funciona para CSS y estilos en línea
No requiere un marco
|
Usaría CSS class .hide {display: none! Important; }.
Para ocultar / mostrar, llamo .addClass ("ocultar") /. RemoveClass ("ocultar"). Para comprobar la visibilidad, utilizo .hasClass ("ocultar").
Es una forma simple y clara de verificar / ocultar / mostrar elementos, si no planea usar los métodos .toggle () o .animate ().
|
Enlace de demostración
$ ('# clickme'). click (function () {
$ ('# libro'). toggle ('lento', función () {
// Animación completa.
alert ($ ('# libro'). is (": visible")); // <--- VERDADERO si es visible Falso si está oculto
});
});


haga clic aquí


Fuente:
Plug n Play de Blogger: herramientas y widgets de jQuery: cómo ver si un elemento está oculto o es visible con jQuery
|
Uno puede simplemente usar el atributo oculto o visible, como:
$ ('elemento: oculto')
$ ('elemento: visible')
O puede simplificar lo mismo con lo siguiente.
$ (elemento) .is (": visible")
|
ebdiv debe establecerse en style = "display: none;". Funciona tanto para mostrar como para ocultar:
$ (documento) .ready (function () {
$ ("# eb"). haga clic en (función () {
$ ("# ebdiv"). toggle ();
});
});
|
Otra respuesta que debe tener en cuenta es que si está ocultando un elemento, debe usar jQuery, pero en lugar de ocultarlo, elimina todo el elemento, pero copia su contenido HTML y la etiqueta en una variable jQuery, y luego todo lo que necesita hacer es probar si hay tal etiqueta en la pantalla, usando el if (! $ ('# thetagname'). length).
|
Al probar un elemento contra: selector oculto en jQuery, se debe considerar que un elemento posicionado absoluto puede reconocerse como oculto aunque sus elementos secundarios sean visibles.
Esto parece algo contrario a la intuición en primer lugar, aunque echar un vistazo más de cerca a la documentación de jQuery da la información relevante:
Los elementos pueden considerarse ocultos por varias razones: [...] Su ancho y alto se establecen explícitamente en 0. [...]
Entonces, esto realmente tiene sentido con respecto al modelo de caja y el estilo calculado para el elemento. Incluso si el ancho y el alto no se establecen explícitamente en 0, pueden establecerse implícitamente.
Eche un vistazo al siguiente ejemplo:
console.log ($ ('. foo'). is (': hidden')); // cierto
console.log ($ ('. bar'). is (': hidden')); // falso
.foo {
posición: absoluta;
izquierda: 10px;
arriba: 10px;
fondo: # ff0000;
}
.bar {
posición: absoluta;
izquierda: 10px;
arriba: 10px;
ancho: 20px;
altura: 20px;
fondo: # 0000ff;
}


 

Actualización para jQuery 3.x:
¡Con jQuery 3, el comportamiento descrito cambiará! Los elementos se considerarán visibles si tienen cuadros de diseño, incluidos los de ancho y / o alto cero.
JSFiddle con jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
El mismo código JavaScript tendrá esta salida:
console.log ($ ('. foo'). is (': hidden')); // falso
console.log ($ ('. bar'). is (': hidden'));// falso
|
Esto puede funcionar:
esperar ($ ("# message_div"). css ("mostrar")). toBe ("ninguno");
|
Ejemplo:
$ (documento) .ready (function () {
if ($ ("# checkme: hidden"). length) {
console.log ('Oculto');
}
});


   Categoría: pescado

 Producto: Salmon Atlantic

 Especie: Salmo salar
Forma: Filetes

|
Para comprobar si no es visible utilizo!:
if (! $ ('# libro'). is (': visible')) {
alerta ('# libro no es visible')
}
O lo siguiente también es el sam, guardando el selector de jQuery en una variable para tener un mejor rendimiento cuando lo necesite varias veces:
var $ libro = $ ('# libro')
if (! $ book.is (': visible')) {
alerta ('# libro no es visible')
}
|
Utilice alternancia de clases, no edición de estilo. . .
Usar clases designadas para "ocultar" elementos es fácil y también uno de los métodos más eficientes. Alternar una clase 'oculta' con un estilo de visualización de 'ninguno' funcionará más rápido que editar ese estilo directamente. Expliqué algo de esto bastante a fondo en la pregunta de Stack Overflow Convertir dos elementos visibles / ocultos en el mismo div.
Mejores prácticas y optimización de JavaScript
Aquí hay un video realmente esclarecedor de una charla técnica de Google realizada por el ingeniero front-end de Google, Nicholas Zakas:
Acelere su Javascript (YouTube)
|
Ejemplo de uso de la marca visible para adblocker está activado:
$ (documento) .ready (function () {
if (! $ ("# ablockercheck"). is (": visible"))
$ ("# ablockermsg"). text ("Desactive adblocker."). show ();
});

 
 
"ablockercheck" es un ID que bloquea adblocker. Entonces, al verificarlo si está visible, puede detectar si el bloqueador de anuncios está activado.
|
Después de todo, ninguno de los ejemplos me queda bien, así que escribí el mío.
Pruebas (sin compatibilidad con el filtro de Internet Explorer: alfa):
a) Compruebe si el documento no está oculto
b) Verifique si un elemento tiene cero ancho / alto / opacidad o muestra: ninguno / visibilidad: oculto en estilos en línea
c) Compruebe si el centro (también porque es más rápido que probar cada píxel / esquina) del elemento no está oculto por otro elemento (y todos los antepasados, por ejemplo: desbordamiento: oculto / desplazamiento / un elemento sobre otro) o bordes de pantalla
d) Verifique si un elemento tiene cero ancho / alto / opacidad o muestra: ninguno / visibilidad: oculto en estilos calculados (entre todos los antepasados)
Probado en
Android 4.4 (navegador nativo / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (modos de documento de Internet Explorer 5-11 + Internet Explorer 8 en un máquina virtual) y Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
relativo = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
función dentro (hijo, padre) {
while (niño) {
si (hijo === padre) devuelve verdadero;
child = child.parentNode;
}
falso retorno;
};
función de retorno (elem) {
Si (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'oculto' ||
elem.style.display == 'ninguno' ||
elem.style.opacity === 0
) falso retorno;
var rect = elem.getBoundingClientRect ();
if (relativo) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) devuelve falso;
} más si (
! inside (document.elementFromPoint (rect.izquierda + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.izquierda + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) falso retorno;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = nulo;
while (el) {
if (el === document) {break;} else if (! el.parentNode) return false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
devuelve verdadero;
}
}) ();
Cómo utilizar:
is_visible (elem) // booleano
|
Debe verificar tanto ... Pantalla como visibilidad:
if ($ (esto) .css ("mostrar") == "ninguno" || $ (esto) .css ("visibilidad") == "oculto") {
// El elemento no es visible
} más {
// El elemento es visible
}
Si buscamos $ (this) .is (": visible"), jQuery busca ambas cosas automáticamente.
|
Tal vez puedas hacer algo como esto
$ (documento) .ready (function () {
var visible =$ ('# tElement'). is (': visible');
si (visible) {
alerta ("visible");
// Código
}
más
{
alerta ("oculto");
}
});

 Nombre 
|
Simplemente verifique la visibilidad buscando un valor booleano, como:
if (this.hidden === false) {
// Tu codigo
}
Usé este código para cada función. De lo contrario, puede usar is (': visible') para verificar la visibilidad de un elemento.
|
Debido a que los Elementos con visibilidad: oculta u opacidad: 0 se consideran visibles, ya que aún consumen espacio en el diseño (como se describe para jQuery: Selector visible), podemos verificar si el elemento es realmente visible de esta manera:
function isElementReallyHidden (el) {
return $ (el) .is (": hidden") || $ (el) .css ("visibilidad") == "oculto" || $ (el) .css ('opacidad') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (esto)) {
booElementReallyShowed = falso;
}
});
|
Pero, ¿y si el CSS del elemento es como el siguiente?
.elemento{
posición: absoluta; izquierda: -9999;
}
Por lo tanto, también se debe considerar esta respuesta a la pregunta de Stack Overflow Cómo verificar si un elemento está fuera de la pantalla.
|
Se puede crear una función para verificar los atributos de visibilidad / visualización para evaluar si el elemento se muestra en la interfaz de usuario o no.
function checkUIElementVisible (elemento) {
return ((element.css ('display')! == 'none') && (element.css ('visibilidad')! == 'hidden'));
}
Violín de trabajo
|
También aquí hay una expresión condicional ternaria para verificar el estado del elemento y luego alternarlo:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('lento'): $ ('elementToToggle ') .show (' lento ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} más {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
Siguiente
Pregunta muy activa. Gana 10 de reputación para responder a esta pregunta. El requisito de reputación ayuda a proteger esta pregunta del spam y de la actividad sin respuesta.
No es la respuesta que estás buscando? Lea otras preguntas etiquetadas javascript jquery dom visibilidad o haga su propia pregunta.